<template>
  <div class="container-dataShow">
    <div class="dataHeader">
      <h1>镇宁自治县物流数据展示中心</h1>
      <div class="showFullScreen" v-show="$route.path=='/data'">按F11全屏</div>
      <div class="showExit" v-show="$route.path=='/data'" @click="showHome">退出</div>
    </div>
    <section class="mainbox">
      <div class="column">
        <div class="panel bar">
          <h2>
            2020年站点快递进出量
          </h2>
          <div class="chart"><three-chart></three-chart></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>收发快递公司所占比例</h2>
          <div class="chart"><two-chart></two-chart></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>2020年1-9月中国仓储指数走势图</h2>
          <div class="chart"><one-chart></one-chart></div>
          <div class="panel-footer"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>9454件</li>
              <li>9200件</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>进港件数</li>
              <li>出港件数</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="chart">
            <china-chart></china-chart>
          </div>
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
      </div>
      <div class="column">
        <div class="panel bar1">
          <h2>中国快递发展规模指数</h2>
          <div class="chart"><five-chart></five-chart></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
          <h2>2020年1-9月全国快递业务量统计</h2>
          <div class="chart"><four-chart></four-chart></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
          <h2>2020年1-9月全国快递业务收入情况统计</h2>
          <div class="chart"><six-chart></six-chart></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
    <span class="footer">数据来源: 镇宁农村电商快递物流仓储配送中心</span>
  </div>
</template>

<script>
import '../../style/echarts.css'
import OneChart from './oneChart'
import TwoChart from './twoChart'
import ThreeChart from './threeChart'
import FourChart from './fourChart'
import FiveChart from './fiveChart'
import SixChart from './sixChart'
import ChinaChart from './chinaChart'
export default {
  name: 'dataShow',
  data () {
    return {
    }
  },
  components: {
    OneChart,
    TwoChart,
    ThreeChart,
    FourChart,
    FiveChart,
    SixChart,
    ChinaChart
  },
  methods: {
    showHome () {
      // 点击退出按钮，返回首页
      this.$router.push('./')
    }
  }
}
</script>

<style scoped lang="less">
.container-dataShow{
    margin: 0;
    padding: 0;
    min-width: 1024px;
    max-width: 1920px;
    background: url('../../assets/echarts/bg.jpg') no-repeat center/cover;
    min-height: 868px;
    header{
      position: relative;
      h1{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
    .showExit{
      width: 60px;
      height: 30px;
      line-height: 30px;
      color: #000;
      background-color: #fff;
      font-size: 18px;
      position: absolute;
      text-align: center;
      border-radius: 15px;
      right: 0;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .showFullScreen{
      font-size: 16px;
      text-align: center;
      width: 85px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      color: #000;
      background-color: #fff;
        position: absolute;
      left: 0;
      top: 50%;
      transform: translate(50%,-50%);
    }
}
</style>
